<!--  frame 个人资料 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
  <meta name="divport" content="width=device-width,initial-scale=1,user-scalable=no" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
	<title>个人资料</title>
	<link rel="stylesheet" href="../plugin/hhframe/hhframe.min.css" />
	<link rel="stylesheet" href="../style/index.css"/>

	<style>

	body {
	  /*background-color:#F8F8F8;*/
	}
	/* pages/my/personal_Info/personal_Info.wxss */

	.wrap {
	  margin-top: .20rem;
	}

	.section {
	  height: 1.00rem;
	  display: flex;
	  align-items: center;
	}

	.s_heigth {
	  height: 1.26rem;
	}

	.s_border {
	  border-bottom: 1px solid #e5e5e5;
	}

	.s_mr_20 {
	  margin-bottom: .20rem;
	}

	.s_box {
	  background: #fff;
	  padding: 0 .30rem;
	}

	.section_title {
	  flex: auto;
	  font-size: .26rem;
	  color: #333;
	}

	.touxiang {
	  width: .90rem;
	  height: .90rem;
	}

	.jiantou {
	  width: .24rem;
	  height: .24rem;
	  line-height: .24rem;
	  font-size: .24rem;
	  color: #999;
	  margin-left: .10rem;
	}

	.nickname {
	  width: 4.00rem;
	  /*height: 1.00rem;*/
		border: solid #F8F8F8 0px;
	  line-height: 1.00rem;
	  font-size: .26rem;
	  color: #999;
	  text-align: right;
	}

	.birthday {
	  font-size: .26rem;
	  color: #666;
	}

	.member, .phone,.area {
	  font-size: .26rem;
	  color: #333;
	}

	.submit1{
	  margin-top: .30rem;
	  width: 6.90rem;
	  height: .80rem;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #ff502d;
		color: #fff;
	  line-height: .60rem;
		border-radius:0.1rem;
	  font-size: .32rem;
	}
	</style>
</head>
<body>
	<div class="content app" v-cloak>
		<div class="wrap">
		  <div class="s_box">
		    <div class="section s_heigth s_border" @click="UploadImage">
		      <div class="section_title">用戶头像</div>
		      <image class="touxiang" :src="headImg"></image>
		      <div class="iconfont iconxiayibu jiantou"></div>
		    </div>
		    <div class="section s_border">
		      <div class="section_title">昵称</div>
		      <input class="nickname" maxlength="6" v-model="nickname"></input>
		      <div class="iconfont iconxiayibu jiantou"></div>
		    </div>
		    <picker mode="date" @click="selectBirthday">
		      <div class="section s_border">
		        <div class="section_title">生日</div>
		        <div class="birthday">{{birthday}}</div>
		        <div class="iconfont iconxiayibu jiantou"></div>
		      </div>
		    </picker>
		    <div class="section s_mr_20">
		      <div class="section_title">会员级别</div>
		      <div class="member">{{memberGrade}}</div>
		    </div>
		  </div>
		  <div class="s_box s_mr_20">
				<div v-if="!userinfo.username" class="section" @click="login_phone0">
					<div class="section_title">绑定手机号</div>
					<div class="phone"></div>
					<div class="iconfont iconxiayibu jiantou"></div>
				</div>
		    <div v-else class="section" >
		      <div class="section_title">绑定手机号</div>
		      <div class="phone">{{phone}}</div>
		      <div class="iconfont iconxiayibu jiantou"></div>
		    </div>
		  </div>
		  <div class="s_box" v-if="userinfo.agent">
		    <div class="section">
		      <div class="section_title">代理区域</div>
		      <div class="area">{{area}}</div>
		    </div>
		  </div>
		</div>
		<div style="width:100%;display:flex;	justify-content: center;align-items: center;">
			<div class="submit1"  @click="submit">保存</div>
		</div>
	</div>
</body>
<script src="../plugin/jquery.js"></script>
<script src="../plugin/vue.all.js"></script>
<script src="../plugin/hhframe/hhframe.min.js"></script>
<script src="../plugin/public.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
window.addEventListener("apiready",function(){
	index()
});

function index()
{
	var vm = new Vue({
		el: ".app",
		data: {
			 headImg: '',
	     nickname: '',
	     birthday: '',
	     memberGrade: '',
	     phone: '',
	     area: '',
	     userinfo: {},
	     qiniuToken: '',
			 input :'',
		},
		mounted: function(){
				this.myaddEventListener()
		},
		methods: {
			// 监听页面打开
			myaddEventListener(){
				api.addEventListener({
						name: 'viewappear'
				}, function(ret, err) {
							vm.getUserInfo()
				});
			},
			//获取数据
			getUserInfo: function (loader){
				AjaxSafe({
			   		url:"/xapp/user",
			    	loader:loader,
					success: function(res) {
						let cityName
		        if (!res.agent) {

		        } else {
		          cityName = (res.agent.agentList).map(item => {
		            return item.cityName
		          })
		        }
						if (res.birthday == null) {
							vm.birthday = ''
						} else {
							vm.birthday = res.birthday
						}
						let grade = res.membership_grade
						if (grade == null || grade < 2000) {
							gradeText = '普通用户'
						} else if (2000 < grade < 5000) {
							gradeText = '黄金会员'
						} else if (5000 < grade < 8000) {
							gradeText = '铂金会员'
						} else if (grade > 8000) {
							gradeText = '钻石会员'
						}
							vm.userinfo = res
							vm.headImg = res.headimgurl
							vm.nickname = res.nickname
							vm.memberGrade = gradeText
							vm.phone = res.username
							vm.area = cityName
					},
					failed: function(err){
							alert("网络故障！");
					}
				});
			},
			// 上传图像
			UploadImage(){
				hhFile.qnUploadImage({
					 token_url: "/api/qiniu",
					 prefix: "xiaojinyu/file",
					 thumb_w: 200,
					 thumb_h: 200,
					 success: function(img,thumb,info){
							vm.headImg = img
					 }
					});
			},
				// 保存
				submit(){
					if(!this.nickname){
						api.toast({
							msg: '昵称不能为空!',
							duration: 2000,
							location: 'middle'
						});
						return
					}
					let param = {
						head_img: this.headImg,
            nick_name: this.nickname,
            birthday: this.birthday,
					}
					AjaxSafe({
				   		url:"/xapp/user/updateUserInfo",
				    	data:param,
				    	loader:true,
						success: function(res) {
						    if (res.state) {
									hhPanel.alert({
									    title: "提示",
									    content: "用户信息修改成功！",
									    btns: ["确定"]
									},function(){
										api.closeWin();//关闭当前window，使用默认动画
									});
						    } else {
						    	api.toast({
										msg: res.msg,
										duration: 2000,
										location: 'middle'
									});
						    }
						},
						failed: function(err){
								alert("网络故障！");
						}
					});
				},
				// 选择生日
				selectBirthday(){
					api.openPicker({
						    type: 'date_time',
						    date: '2014-05-01',
						    title: '选择时间'
						}, function(ret, err) {
						    if (ret) {
									vm.birthday = ret.year+'-'+ret.month+'-'+ret.day
						        // alert(JSON.stringify(ret));
						    } else {
						        // alert(JSON.stringify(err));
						    }
						});
				},
		},

	});
}

</script>
</html>
